<!DOCTYPE html5>
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=gbk">
	<title>RTSP Streaming</title>

	<script>
		function rotateMe() {
            i = 0;
            int = setInterval(
            function () {
                video.style.WebkitTransform = 'rotate(' + (i++ %360) + 'deg)';
                video.style.MozTransform = 'rotate(' + (i++ %360) + 'deg)';
                video.style.OTransform = 'rotate(' + (i++ %360) + 'deg)';
            }, 50);
        }

        function resetRotation() {
            video.style.WebkitTransform = 'rotate(0)';
            video.style.MozTransform = 'rotate(0)';
            video.style.OTransform = 'rotate(0)';
        }
	</script>

</head>

<body>
	<div style="text-align: center;">
		<video style="transform: rotate(0deg);" id="v1" controls="controls" onmouseover="this.play()" height="100%" width="100%">
			<source src="./MP4/test.mp4"> html5 video
		</video>
	</div>

	<script>
		var video = document.getElementsByTagName('video')[0];
	</script>

	<div style="text-align: center;">
		<button onclick="video.play()"> &#9654; </button>
		<button onclick="video.pause()"> &#9724; </button>
		<button onclick="video.volume += 0.25">Volume Up</button>
		<button onclick="video.volume -= 0.25">Volume Down</button>
		<button onclick="video.muted = true">Mute</button>
		<button onclick="video.muted = false">Unmute</button>
		<button onclick="rotateMe()"> Start Rotation</button>
		<button onclick="int=window.clearInterval(int);resetRotation()"> Stop Rotation</button>
		<button onclick="int=window.clearInterval(int);resetRotation()"> change Channel</button>
	</div>

</body>

</html>